<template>
  <div class="tree">
    <div class="tree-title">{{tree.type}}<span v-if="tree.value">({{tree.value}})</span></div>
    <div :style="{ paddingLeft: `${level*20}px` }">
      <div v-for="(l,i1) in tree.links" :key="i1" class="tree-rels">
        <div class="tree-rel-name">
          <div class="tree-rel-name-name">{{l.name}}</div>
        </div>
        <div class="tree-rel-items">
          <Tree v-for="(node,i2) in l.list" :key="i2" :tree="node" :level="level + 1"></Tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tree: Object,
    level: {
      type: Number,
      default: 1,
    },
  },
};
</script>

<style>
.tree {
  padding: 2px;
}
.tree-title {
  background-color: #b8f1ba;
  color: #333;
  padding: 5px;
}
.tree-rels {
  display: flex;
  align-items: stretch;
  border-bottom: solid 2px #fff;
}
.tree-rel-name {
  background-color: #eee;
  display: flex;
  align-items: center;
}
.tree-rel-name-name {
  width: 100px;
  text-align: center;
}
</style>
